<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  ~   Copyright 1999-2016 Asiainfo Technologies(China),Inc.
  ~
  ~   Licensed under the Apache License, Version 2.0 (the "License");
  ~   you may not use this file except in compliance with the License.
  ~   You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~   Unless required by applicable law or agreed to in writing, software
  ~   distributed under the License is distributed on an "AS IS" BASIS,
  ~   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~   See the License for the specific language governing permissions and
  ~   limitations under the License.
  ~
  --%>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
    <title>主机列表</title>
    <script>

        $(document).ready(function () {
            var mySelect = $('#first-disabled2');

            $('#special').on('click', function () {
                mySelect.find('option:selected').prop('disabled', true);
                mySelect.selectpicker('refresh');
            });

            $('#special2').on('click', function () {
                mySelect.find('option:disabled').prop('disabled', false);
                mySelect.selectpicker('refresh');
            });

            $('#basic2').selectpicker({
                liveSearch: true,
                maxOptions: 1
            });
        });



        $(function () {

            //$(":input").inputmask();

            $("#search").click(function () {
                refreshHostList();

            })
            $("#add-host").click(function () {
                showDetail();
            });
            $('#host-detail').on('show.bs.modal', function () {

            });
            $("#save-host").click(function() {
                var form = $("#host-form");
                if (!form.valid()){
                    return;
                }
                $.post("${ctx}/redis-api/saveHost", form.serialize(), function(data) {
                    if (data.success == true){
                        toastr.success("操作成功！");
                        $('#host-detail').modal('hide');
                        refreshHostList();
                    }
                });
            });

            $("#check-host").click(function () {

            });

            $('#table').bootstrapTable({
                url: "${ctx}/redis-api/getHosts",
                dataType: "json",
                uniqueId: "id",
                classes: "table table-no-bordered",//table-hover
                striped: true,
                smartDisplay:false,
                pagination: true,
                singleSelect: true,
                locale: "zh-US",
                search: false,
                sidePagination: "server",
                showLoading: true,
                showToggle:false,
                queryParams: function(params){
                    params.search = $('#search-key').val();
                    return params;
                },
                columns: [{
                    title: '主机IP',
                    field: 'ip',
                    align: 'center',
                    width: '250px',
                    valign: 'middle'
                }, {
                    title: '登录用户',
                    field: 'loginUser',
                    align: 'center',
                    width: '150px',
                    valign: 'middle',
                }, {
                    title: '操作',
                    field: 'id',
                    align: 'center',
                    width: '100px',
                    formatter:function(value, row, index){
                        var e = '<a href="#" onclick="showDetail(\''+ row.id + '\')">编辑</a> ';
                        return e;
                    }
                }]
            });

        });

        function refreshHostList(){
            $('#table').bootstrapTable('refresh');
        }

        function showDetail(hostId){
            if (hostId != null){
                $("#myModalLabel").text("编辑主机");
                var row = $('#table').bootstrapTable('getRowByUniqueId', hostId);
                $('#id').val(row.id);
                $('#ip').val(row.ip);
                $('#loginUser').val(row.loginUser);
                $('#password').val(row.password);
            }else{
                $('#id').val("");
                $('#ip').val("");
                $('#loginUser').val("");
                $('#password').val("");
                $("#myModalLabel").text("新增主机");
            }
            $('#host-detail').modal('show');
        }

    </script>
</head>

<body>

<div class="page-title">
    <h3>主机管理</h3>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="widget-container fluid-height clearfix">
            <div class="heading">
                <i class="icon-table"></i>主机列表
            </div>
            <div class="widget-content padded clearfix">
                <div class="form-horizontal clearfix">
                    <button type="button" class="btn btn-primary" id="add-host">新增主机</button>
                    <div class="col-md-4 pull-right">
                        <div class="col-lg-12 col-sm-12 input-group">
                            <input placeholder="请输入IP关键字" id="search-key" class="form-control">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-primary" id="search">搜索</button>
                            </span>
                        </div>
                    </div>
                </div>
                <table class="table table-striped" id="table">
                </table>
                <%--<table class="table table-striped" id="table" data-pagination="true" data-search="false" data-unique-id="id">--%>
                <%--</table>--%>
            </div>
        </div>
    </div>
</div>

</div>







<div class="modal fade" id="host-detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="host-form">
                    <div class="form-group">
                        <label for="ip" class="col-sm-3 control-label">主机IP</label>
                        <div class="col-sm-7">
                            <input type="hidden" id="id" name="id">
                            <input type="text" class="form-control required" id="ip" name="ip" placeholder="请输入主机IP" data-inputmask="'alias':'ip'">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="loginUser" class="col-sm-3 control-label">登录用户名</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="loginUser" name="loginUser" placeholder="请输入登录用户名" required="true">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-3 control-label">登录密码</label>
                        <div class="col-sm-7">
                            <input type="password" class="form-control" id="password" name="password" placeholder="请输入登录密码" required="true">
                        </div>
                    </div>
                    <%--<div class="form-group">--%>
                        <%--<div class="col-sm-offset-3 col-sm-7">--%>
                            <%--<button type="button" class="btn btn-primary" id="check-host">测试连接</button>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary" id="save-host">保存</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
